<template>
  <div>
    <div class="title">国内疫情地图</div>
    <van-tabs v-model="active" animated @change="change">
      <van-tab title="现存确诊">
        <div id="nowChinaMap" style="width: 7.2rem; height: 7rem"></div>
      </van-tab>
      <van-tab title="累计确诊">
        <div id="ChinaMap" style="width: 7.2rem; height: 7rem"></div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import api from '@/api/index.js'
export default {
  data () {
    return {
      active: 0,
      arr: []
    }
  },
  components: {},
  computed: {},
  methods: {
    change (title) {
      if (title === 1) {
        this.$nextTick(() => {
          this.$myCharts.ChinaMap('ChinaMap', this.arr)
        })
      }
    }
  },
  created () {},
  mounted () {
    api.getChinaData().then((res) => {
      console.log('-------', res.data)
      // 获取省份数据
      const citys = res.data.retdata
      const arr = [] // 累计
      const nowArr = [] // 现存
      for (let i = 0; i < citys.length; i++) {
        const obj = {}
        obj.name = citys[i].xArea
        obj.value = citys[i].confirm // 累计确诊人数   curConfirm现在确诊人数
        const now = {}
        now.name = citys[i].xArea
        now.value = citys[i].curConfirm
        arr.push(obj)
        nowArr.push(now)
        this.arr = arr
      }
      console.log(nowArr)
      // vue里面 等待延迟加载
      this.$nextTick(() => {
        console.log(nowArr)
        this.$myCharts.ChinaMap('nowChinaMap', nowArr)
      })
    })
  }
}
</script>
<style lang="less" scoped>
.title {
  height: 0.2rem;
  line-height: 0.2rem;
  font-size: 0.26rem;
  font-weight: bolder;
  border-left: 0.1rem solid rgb(20, 49, 128);
  padding: 0.2rem;
  margin-left: 0.2rem;
  margin-bottom: 0.2rem;
}
#nowChinaMap {
  background-color: #f5f5f5;
  margin: auto;
  border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
}
#ChinaMap {
  background-color: #f5f5f5;
  margin: auto;
  border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
}
</style>
